<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #panel,
        #flip {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }

        #panel {
            padding: 50px;
            display: none;
        }
    </style>
</head>

<body>
<h3>Why jQuery Callback Functions</h3>
<p id="p1">原生JS并没有顺次实现改变，jquery回调可以实现</p>
<button type="button" onclick="p1()">JS click</button>
<button type="button" id="b1">jQuery callback function</button>
<hr>
<h3>The hover() method</h3>
<p id="p2">hover()方法支持2个回调方法</p>
<hr>
<h3>The on() method</h3>
<p id="p3">on()，当一个元素需要监听多个事件时，可使用on()方法封装</p>
<hr>
<h3>The text() method</h3>
<button id="gettext">get</button>
<button id="settext">set</button>
<p id="text">text()，获取/修改元素
    <b>文本内容</b>
</p>
<hr>
<h3>The html() method</h3>
<button id="gethtml">get</button>
<button id="sethtml">set</button>
<p id="html">html() ，获取/修改元素
    <b>文本内容</b>
</p>
<hr>
<h3>The val() method</h3>
<input name="username" value="BO">
<br>
<button id="getval">get</button>
<button id="setval">set</button>
<hr>
<h3>The prop() method</h3>
<input id="typetocheckbox" type="text">修改元素属性
<br>
<button id="getprop">get</button>
<button id="setprop">set</button>
<hr>

<h3>jQuery Effects - Hide and Show</h3>
<button id="hide">hide</button>
<button id="show">show</button>
<button id="hide2">hide 1s</button>
<button id="toggle">toggle</button>
<div id="hs" style="height: 50px;">jQuery Effects - Hide and Show. toggle()，基于当前显示状态执行相反的方法</div>
<hr>

<h3>jQuery Effects - Fading</h3>
<button id="fadein">fadein</button>
<button id="fadeout">fadeout</button>
<button id="fadetoggle">fadetoggle</button>
<button id="fadeto">fadeto</button>
<div id="fade1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="fade2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="fade3" style="width:80px;height:80px;background-color:blue;"></div>

<hr>
<h3>jQuery Effects - Sliding</h3>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
<hr>

<h3>jQuery - Add/Remove Elements</h3>
<p id="app_p">This is a paragraph.</p>
<ol id="app_ol">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button id="apptext">Append text</button>
<button id="appitem">Append list items</button>
<button id="removeitem">remove last items</button>
<hr>

<h3>Advanced Examles</h3>
<p>淡入效果，将输入内容追加至列表</p>
<ol id="adv_ol">
    <li>HTML实验</li>
    <li>CSS实验</li>
</ol>
<input id="exp">
<button id="advitem">追加</button>
<br>
<p>购买本产品的用户可免费获赠以下3项礼品中的2项</p>
<label>
    <input type="checkbox" name="items">6TB机械硬盘
</label>
<label>
    <input type="checkbox" name="items">512GB SSD固态硬盘
</label>
<label>
    <input type="checkbox" name="items">16GB DDR4内存
</label>
<hr>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    function p1() {
        // 几乎同时执行
        document.getElementById("p1").style.display = "none";
        window.alert("hidden");
    }
    $(function () {
        // 点击b1后，执行回调函数
        $("#b1").click(() => {
            // 隐藏p1后，执行回调函数
            $("#p1").hide(() => {
                alert("hidden");
            });
        });
       /* $("#b1").click(() => {
          $.when($("#p1").hide('fast'))
            .done(() => alert("hidden"));
        });*/

        /* -------------hover()，2个回调方法，第一个为进入，第二个为离开 --------- */
        $("#p2").hover(function () {
            $(this).text("you entered p");
        }, function () {
            $(this).text("Bye! You now leave p1!");
        });

        /*----------------------on()，封装多监听  */
        $("#p3").on({
            click: function () {
                $(this).text("click");
            },
            mouseenter: function () {
                $(this).text("mouseenter");
            },
            mouseleave: function () {
                $(this).text("mouseleave");
            }
        });
        /* ----------------text()---------------- */
        $("#gettext").click(() => {
            alert($("#text").text());
        });
        $("#settext").click(() => {
            $("#text").text("修改文本<b>内容</b>");
        });
        /*------------------html()--------------  */
        $("#gethtml").click(function () {
            alert($("#html").html());
        });
        $("#sethtml").click(function () {
            $("#html").html("修改文本<span style='color:red;'>内容</span>");
        });
        /* ---------- val() ------------ */
        $("#getval").click(() => {
            alert($("input[name=username]").val());
        });
        $("#setval").click(() => {
            $("input[name=username]").val("SUN");
        });

        /* ----------prop() ------------ */
        $("#getprop").click(() => {
            alert($("#typetocheckbox").prop("type"));
        });
        $("#setprop").click(() => {
            let e = $("#typetocheckbox");
            e.prop("type", "checkbox");
            e.prop("disabled", true);
        });

        /* ----------------------------  */
        $("#hide").click(() => {
            $("#hs").hide();
        });
        $("#show").click(() => {
            $("#hs").show();
        });
        $("#hide2").click(() => {
            $("#hs").hide(1000);
        });
        $("#toggle").click(() => {
            $("#hs").toggle(1000, function () {
                $(this).text("toggle");
            });
        });
        /*------------------------fade----------------------  */
        $("#fadein").click(() => {
            $("#fade1").fadeIn();
            $("#fade2").fadeIn("slow");
            $("#fade3").fadeIn(3000);
        });
        $("#fadeout").click(() => {
            $("#fade1").fadeOut();
            $("#fade2").fadeOut("slow");
            $("#fade3").fadeOut(3000);
        });
        $("#fadetoggle").click(() => {
            $("#fade1").fadeToggle();
            $("#fade2").fadeToggle("slow");
            $("#fade3").fadeToggle(3000);
        });
        $("#fadeto").click(() => {
            $("#fade1").fadeTo("slow", 0.15);
            $("#fade2").fadeTo("slow", 0.4);
            $("#fade3").fadeTo("slow", 0.7);
        });

        /*--------------- slideToggle ----------------  */
        $("#flip").click(() => {
            $("#panel").slideToggle("slow");
        });

        /*-------------- Add/Remove ------------------  */
        $("#apptext").click(() => {
            $("#app_p").append("<b>Appended text</b>.");
        });
        $("#appitem").click(() => {
            $("#app_ol").append("<li>Appended item</li>");
        });
        $("#removeitem").click(() => {
            $("#app_ol").children().last().remove();
        });

        /* ------------Advanced Examles------------------ */
        $("#advitem").click(() => {
            // 获取输入框对象，后续需继续使用，避免反复在DOM查询
            let input = $("#exp");
            // 获取输入内容
            let context = input.val();
            // 清空输入框
            input.val("");
            // 创建jquery html元素对象
            let newItem = $(`<li>${context}</li>`);
            newItem.css("display", "none");
            // 追加至列表，但因css属性不显示
            $("#adv_ol").append(newItem);
            // 淡入。修改元素display属性，并隐式迭代计算透明度
            newItem.fadeIn(2000);
        });
        /*--------------  */
        // 模拟可选总数
        const amount = 2;
        // 复选框组。元素是固定的，置于事件执行外,可避免每次执行事件时反复查询
        const checkboxs = $("input[name=items]");
        // 当任一项被点击时
        checkboxs.click(() => {
            // 过滤，获取复选框组中所有选中元素
            // 当达到数量时，设置未选中项，为不可用状态
            let dis = checkboxs.filter(":checked").length >= amount;
            // 过滤，获取复选框组中所有未选中元素。变为不可用状态
            checkboxs.not(":checked").prop("disabled", dis);
        });
    });
</script>
</body>
</html>